<template>
<!-- import { setTimeout } from 'timers'; -->
  <div id="app">
 
    <router-view/>
    <audio :src="audio" controls="controls" autoplay="autoplay" style="opacity: 0;"></audio>
     <div class="Add_timetable"  v-show="addActive">
           <div class="add_list">
               <div class="add_top">
         
          <span class="el-icon-circle-close" @click.stop="hide" style="width: 100%;">  
          <span style="margin-left: 20%"> {{message}}</span>
          </span>
        </div>
        <div class="add_bottom">
         
        </div>
           </div>
       </div> 
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
			return {
        audio:'',
        addActive:false,
        message:''
			};
		},
   beforeCreate(){
     let _this = this;
      let qs = require("qs");
       let obj1 = {
      };
      _this.$axios.post("/yujiaextend/gymadmin/checkIsHaveNewBooking", qs.stringify(obj1), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(response => {
          window.localStorage.setItem('ckrs',response.data.data[0])
        })
        .catch(error => {
          console.log(error);
        });
  },
   created() {
      setInterval(()=>{
        let _this = this;
        let qs = require("qs");
        let obj1 = {
        };
        _this.$axios
          .post("/yujiaextend/gymadmin/checkIsHaveNewBooking", qs.stringify(obj1), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(response => {
            var ckrs=window.localStorage.getItem('ckrs')
            if (response.data.data[0] > ckrs) {
              _this.audio='http://yogahome.top/videos/booking.mp3'
              var hua=response.data.data[1]
              _this.addActive=true
              _this.message=hua.action_date+'日'+hua.attend+'人约了'+hua.action_name
            }
          })
          .catch(error => {
            console.log(error);
          });
    },1000)
  },
  mounted(){
    setTimeout(()=>{
      // console.log(this.$states)
      if(this.$state == -9){
        this.$message({
          message: '用户已经过期，请重新登录',
          type: 'warning'
        });     
         this.$router.push({
          path: "/login",
          })
      }
    },3000)
  },
  methods:{
    hide(){
      this.addActive=false
      this.audio=''
      window.location.reload()
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  font-family:'微软雅黑'
  /* margin-top: 60px; */

}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li{
  list-style: none
}
a {
	text-decoration: none;
	color: #333333;
}

.el-table--enable-row-transition .el-table__body td{
    text-align: center;
}

.el-table thead {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}
.el-table thead th {
  height: 60px;
  text-align: center;

background: #ddeafe!important;
}
.el-table tr td{
  height: 66px;
  color: #000000;
  font-size: 15px;
  text-align: center;
}
.el-input__inner{
    height:35px!important;
    line-height:35px!important;
    

}
.el-textarea__inner{
    resize:none
}
.el-color-picker__trigger{
  width: 100px;
  

}
.el-color-picker__icon {
    top: 50%;
    left: 80%;
    font-size: 12px;
    position: absolute;
}
p{
  margin-bottom: 0;
}
input[type='text']{
  /* height: 35px; */
  margin-bottom: 0;
  padding: 0;
  padding-left: 5px;
  font-size: 14px;
}
.Add_timetable {
  width: 110%;

  height: 100%;
  position: absolute;

  left: -250px;

  top: 0;

  z-index: 5;

  background: rgba(0, 0, 0, 0.4);
}
.Add_timetable .add_list {
  width: 560px;

  background: #fff;

  margin: 0 auto;
  margin-top: 40px;

  border-radius: 6px;

  box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);

  padding: 0 40px;

  padding-bottom: 40px;
}
.Add_timetable .add_list .add_top {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 40px;
}
.Add_timetable .add_list .add_top p {
  font-size: 20px;

  padding-bottom: 5px;

  border-bottom: 3px solid #286fe6;

  color: #000;

  font-weight: bold;
}
.Add_timetable .add_list .add_top span {
  font-size: 18px;

  display: inline-block;
}
.Add_timetable .add_list .add_bottom {
  width: 100%;
}
.Add_timetable .add_list .add_bottom ul {
  width: 100%;
}
.Add_timetable .add_list .add_bottom ul li {
  width: 100%;
  margin-top: 30px;
}
.Add_timetable .add_list .add_bottom ul li .add_choose {
  width: 100%;
  display: flex;
  align-items: center;
}
.Add_timetable .add_list .add_bottom ul li .add_choose span {
  width: 20%;
  font-size: 14px;
  color: #000000;
}
.Add_timetable .add_list .add_bottom ul li .add_choose .el-select {
  width: 55%;
}
.Add_timetable .add_list .add_bottom ul li .add_choose .el-input {
    width: 55%;

}
.Add_timetable .add_list
  .add_bottom
  ul
  li
  .add_choose
  .el-button--success.is-plain {
  margin-left: 20px;
  background: #fff;
  color: #286fe6;
  font-size: 14px;
  border: 1px solid #286fe6;
  padding: 8px 8px;
}
.Add_timetable .add_list
  .add_bottom
  ul
  li
  .add_choose
  .el-button--success.is-plain
  i {
  font-size: 12px;
}
.Add_timetable .add_list .add_bottom ul li .add_choose .el-date-editor {
  width: 40%;
}

.Add_timetable .add_list .add_bottom ul li .add_choose font {
  font-size: 16px;
  color: #000000;
  margin: 0 30px;
}
.Add_timetable .add_list .add_bottom ul .add_img {
  margin-top: 20px;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose {
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .add_image {
    width: 140px;
    height:80px;
    border: 1px dashed #cdcdcd;
    text-align: center;

}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .add_image i{
    margin-top: 23px;
    font-size: 18px;
    color: #cdcdcd;
    font-weight: bold;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .add_image  p{
    font-size: 12px;
    color: #aaaaaa;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose .file {
  width: 80px;
  height: 30px;
  position: absolute;
  left: 54%;
  bottom: 0;
  outline: none;
  border: none;
  opacity: 0;
}
.Add_timetable .add_list .add_bottom ul .add_img .add_choose button {
  width: 80px;
  height: 30px;
  margin-left: 22px;
  border-radius: 4px;
  border: 1px solid #286fe6;
  font-size: 14px;
  outline: none;
  background: #fff;
  color: #286fe6;
}
.Add_timetable .add_list .add_bottom ul li .add_choose img {
  /* width: 130px;
  height: 90px; */
}
.Add_timetable .add_list .add_bottom ul li .add_choose .add_word {
  width: 80%;
  text-align: left;
  font-size: 16px;
  color: #286fe6;
  padding-left: 0;
}
.Add_timetable .add_list .add_submit {
  width: 35%;

  height: 40px;

  line-height: 40px;

  margin: 0 auto;

  text-align: center;

  background: #2f7dfe;

  border-radius: 4px;

  margin-top: 70px;

  font-size: 16px;

  color: #fff;
}
</style>
